<template>
  <div>
    <el-form :model="formConfig" size="small" label-position="left" label-width="120px" class="setting-form"
      @submit.prevent>
      <el-collapse v-model="formActiveCollapseNames" class="setting-collapse">
        <el-collapse-item name="1" :title="i18nt('designer.setting.basicSetting')">
          <el-form-item :label="i18nt('designer.setting.formSize')">
            <el-select v-model="formConfig.size" clearable>
              <el-option :label="i18nt('designer.setting.olDefaultSize')" value="default"></el-option>
              <el-option :label="i18nt('designer.setting.olLargeSize')" value="large"></el-option>
              <el-option :label="i18nt('designer.setting.olSmallSize')" value="small"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-show="false" label="是否公文模板">
            <el-switch v-model="formConfig.isdocumentFrom" @change="isDocumentFromChangeHandle"></el-switch>
          </el-form-item>
          <el-form-item label="表单宽度(%)">
            <el-input-number v-model="formConfig.formWidth" :min="10" :max="formConfig.formWidthUnit == '%' ? 100 :10000" style="width: 70%" :controls="false"></el-input-number>
            <el-select v-model="formConfig.formWidthUnit" placeholder="单位" style="width: 30%" @change="handleFormWidthUnitChange">
              <el-option label="%" value="%"/>
              <el-option label="px" value="px"/>
            </el-select>
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.labelPosition')">
            <el-radio-group v-model="formConfig.labelPosition" class="radio-group-custom">
              <el-radio-button value="left">{{ i18nt('designer.setting.leftPosition') }}</el-radio-button>
              <el-radio-button value="top">{{ i18nt('designer.setting.topPosition') }}</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.h5LabelTop')">
            <el-switch v-model="formConfig.h5LabelTop"></el-switch>
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.labelAlign')">
            <el-radio-group v-model="formConfig.labelAlign" class="radio-group-custom">
              <el-radio-button value="label-left-align">{{ i18nt('designer.setting.leftAlign') }}</el-radio-button>
              <el-radio-button value="label-center-align">{{ i18nt('designer.setting.centerAlign') }}</el-radio-button>
              <el-radio-button value="label-right-align">{{ i18nt('designer.setting.rightAlign') }}</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.labelWidth')">
            <el-input-number v-model="formConfig.labelWidth" :min="0" style="width: 100%"></el-input-number>
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.gridResponsive')">
            <el-switch v-model="formConfig.gridResponsive"></el-switch>
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.formCss')">
            <el-button type="info" icon="el-icon-edit" plain round @click="editFormCss">{{
              i18nt('designer.setting.addCss') }}</el-button>
          </el-form-item>
          <!-- -->
          <el-form-item :label="i18nt('designer.setting.customClass')">
            <el-select v-model="formConfig.customClass" multiple filterable allow-create default-first-option
              @change="classchangetest">
              <el-option v-for="(item, idx) in cssClassList" :key="idx" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <!-- -->
          <el-form-item :label="i18nt('designer.setting.globalFunctions')">
            <el-button type="info" icon="el-icon-edit" plain round @click="editGlobalFunctions">{{
              i18nt('designer.setting.addEventHandler') }}</el-button>
          </el-form-item>
          <el-form-item label-width="0">
            <el-divider class="custom-divider">{{ i18nt('designer.setting.formSFCSetting') }}</el-divider>
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.formModelName')">
            <el-input type="text" v-model="formConfig.modelName"></el-input>
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.formRefName')">
            <el-input type="text" v-model="formConfig.refName"></el-input>
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.formRulesName')">
            <el-input type="text" v-model="formConfig.rulesName"></el-input>
          </el-form-item>
          <!-- 新增一个设置表单唯一值的入口 -->
          <el-form-item label="表单唯一值">
            <el-button type="info" icon="el-icon-edit" plain round @click="editFormUniqueValue">表单唯一值</el-button>
          </el-form-item>
          <!-- 添加新的配置项 -->
          <el-form-item :label="i18nt('designer.setting.dataOutputFormat')">
            <el-switch
              v-model="formConfig.dataOutputFormat"
              @change="handleDataOutputFormatChange">
            </el-switch>
          </el-form-item>
        </el-collapse-item>

        <el-collapse-item v-if="showEventCollapse()" name="2" :title="i18nt('designer.setting.eventSetting')">
          <el-form-item label="onFormCreated" label-width="150px">
            <el-button type="info" icon="el-icon-edit" plain round
              :class="[getFormEventHandled('onFormCreated') ? 'button-text-highlight' : '']"
              @click="editFormEventHandler('onFormCreated')">
              {{ i18nt('designer.setting.addEventHandler') }}</el-button>
          </el-form-item>
          <el-form-item label="onFormMounted" label-width="150px">
            <el-button type="info" icon="el-icon-edit" plain round
              :class="[getFormEventHandled('onFormMounted') ? 'button-text-highlight' : '']"
              @click="editFormEventHandler('onFormMounted')">
              {{ i18nt('designer.setting.addEventHandler') }}</el-button>
          </el-form-item>
          <!-- -->
          <el-form-item label="onFormDataChange" label-width="150px">
            <el-button type="info" icon="el-icon-edit" plain round
              :class="[getFormEventHandled('onFormDataChange') ? 'button-text-highlight' : '']"
              @click="editFormEventHandler('onFormDataChange')">
              {{ i18nt('designer.setting.addEventHandler') }}</el-button>
          </el-form-item>
          <!-- -->
          <el-form-item label="onFormValidate" label-width="150px">
            <el-button type="info" icon="el-icon-edit" plain round
              :class="[getFormEventHandled('onFormValidate') ? 'button-text-highlight' : '']"
              @click="editFormEventHandler('onFormValidate')">
              {{ i18nt('designer.setting.addEventHandler') }}</el-button>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
    </el-form>

    <div v-if="showFormEventDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
      <el-dialog :title="i18nt('designer.setting.editFormEventHandler')" v-model="showFormEventDialogFlag"
        :show-close="true" class="drag-dialog small-padding-dialog" append-to-body :close-on-click-modal="false"
        :close-on-press-escape="false" :destroy-on-close="true">
        <el-alert type="info" :closable="false" :title="'form.' + eventParamsMap[curEventName]"></el-alert>
        <code-editor :mode="'javascript'" :readonly="false" v-model="formEventHandlerCode" ref="ecEditor"></code-editor>
        <el-alert type="info" :closable="false" title="}"></el-alert>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showFormEventDialogFlag = false">
              {{ i18nt('designer.hint.cancel') }}</el-button>
            <el-button type="primary" @click="saveFormEventHandler">
              {{ i18nt('designer.hint.confirm') }}</el-button>
          </div>
        </template>
      </el-dialog>
    </div>

    <div v-if="showEditFormCssDialogFlag" class=""
      v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
      <el-dialog :title="i18nt('designer.setting.formCss')" v-model="showEditFormCssDialogFlag" :show-close="true"
        class="drag-dialog small-padding-dialog" append-to-body :close-on-click-modal="false"
        :close-on-press-escape="false" :destroy-on-close="true">
        <code-editor :mode="'css'" :readonly="false" v-model="formCssCode"></code-editor>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showEditFormCssDialogFlag = false">
              {{ i18nt('designer.hint.cancel') }}</el-button>
            <el-button type="primary" @click="saveFormCss">
              {{ i18nt('designer.hint.confirm') }}</el-button>
          </div>
        </template>
      </el-dialog>
    </div>

    <div v-if="showEditFunctionsDialogFlag" class=""
      v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
      <el-dialog :title="i18nt('designer.setting.globalFunctions')" v-model="showEditFunctionsDialogFlag"
        :show-close="true" class="drag-dialog small-padding-dialog" append-to-body :close-on-click-modal="false"
        :close-on-press-escape="false" :destroy-on-close="true">
        <code-editor :mode="'javascript'" :readonly="false" v-model="functionsCode" ref="gfEditor"></code-editor>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showEditFunctionsDialogFlag = false">
              {{ i18nt('designer.hint.cancel') }}</el-button>
            <el-button type="primary" @click="saveGlobalFunctions">
              {{ i18nt('designer.hint.confirm') }}</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <!-- 表单唯一值弹窗 -->
    <div v-if="uniqueValueDialogVisible" class=""
      v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
      <el-dialog :title="i18nt('designer.setting.formUniqueValue')" v-model="uniqueValueDialogVisible"
        :show-close="true" class="drag-dialog small-padding-dialog" append-to-body :close-on-click-modal="false"
        :close-on-press-escape="false" :destroy-on-close="true">
        <ConfirmDialog
          :designer="designer"
          :form-config="formConfig"
          :visible.sync="uniqueValueDialogVisible"
          :existingUniqueData="initialUniqueData"
          @table-data-update="handleTableDataUpdate"
          @close="handleUniqueValueClose"
          @confirm="handleUniqueValueConfirm"
          @field-selected="handleFieldSelected"
          ></ConfirmDialog>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="uniqueValueDialogVisible = false">
              {{ i18nt('designer.hint.cancel') }}</el-button>
            <el-button type="primary" @click="saveFormUniqueValue">
              {{ i18nt('designer.hint.confirm') }}</el-button>
          </div>
        </template>
      </el-dialog>
    </div>


  </div>
</template>

<script>
import i18n from "@/utils/i18n"
import CodeEditor from '@/components/code-editor/index'
import ConfirmDialog from './uniqueConfirmDialog.vue'
import { deepClone, insertCustomCssToHead, insertGlobalFunctionsToHtml } from "@/utils/util"

export default {
  name: "form-setting",
  mixins: [i18n],
  components: {
    CodeEditor,
    ConfirmDialog,
  },
  props: {
    designer: Object,
    formConfig: Object,
  },
  inject: ['getDesignerConfig'],
  data() {
    return {
      // 表单唯一值弹窗
      uniqueValueDialogVisible: false,
      uniqueValueFields: [], // 存储选中的唯一值字段
      currentUniqueField: null, // 当前选中的字段
      designerConfig: this.getDesignerConfig(),

      formActiveCollapseNames: ['1', '2'],

      formSizes: [
        { label: 'default', value: '' },
        { label: 'large', value: 'large' },
        //{label: 'medium', value: 'medium'},
        { label: 'small', value: 'small' },
        //{label: 'mini', value: 'mini'},
      ],

      showEditFormCssDialogFlag: false,
      formCssCode: '',
      cssClassList: [],

      showEditFunctionsDialogFlag: false,
      functionsCode: '',

      showFormEventDialogFlag: false,
      formEventHandlerCode: '',
      curEventName: '',

      eventParamsMap: {
        'onFormCreated': 'onFormCreated() {',
        'onFormMounted': 'onFormMounted() {',
        'onFormDataChange': 'onFormDataChange(fieldName, newValue, oldValue, formModel, subFormName, subFormRowIndex) {',
        'onFormValidate': 'onFormValidate(formModel) {',
      },
    }
  },
  computed: {
    initialUniqueData() {
      return this.formConfig.uniqueValueTableData || []
    }
  },
  created() {
    //导入表单JSON后需要重新加载自定义CSS样式！！！
    this.designer.handleEvent('form-json-imported', () => {
      this.formCssCode = this.formConfig.cssCode
      insertCustomCssToHead(this.formCssCode)
      this.extractCssClass()
      this.designer.emitEvent('form-css-updated', deepClone(this.cssClassList))
    })
    // 确保formConfig中有dataOutputFormat属性的初始值
    if (typeof this.formConfig.dataOutputFormat === 'undefined') {
      this.formConfig.dataOutputFormat = false
    }
  },
  mounted() {
    /* SettingPanel和FormWidget为兄弟组件, 在FormWidget加载formConfig时，
       此处SettingPanel可能无法获取到formConfig.cssCode, 故加个延时函数！ */
    setTimeout(() => {
      this.formCssCode = this.formConfig.cssCode
      insertCustomCssToHead(this.formCssCode)
      this.extractCssClass()
      this.designer.emitEvent('form-css-updated', deepClone(this.cssClassList));
      this.isDocumentFromChangeHandle(true)
    }, 1200)
  },
  methods: {
    classchangetest(val) {
    },
    isDocumentFromChangeHandle(val) {
      if (val) {
        if (this.formConfig.customClass.indexOf('isDocumentFrom') === -1) {
          this.formConfig.customClass.push('isDocumentFrom')
        }
      } else {
        this.formConfig.customClass = this.formConfig.customClass.filter(item => item !== 'isDocumentFrom')
      }
      this.designer.saveCurrentHistoryStep()
    },
    getFormEventHandled(eventName) {
      return !!this.formConfig[eventName] && (this.formConfig[eventName].length > 0)
    },

    showEventCollapse() {
      if (this.designerConfig['eventCollapse'] === undefined) {
        return true
      }

      return !!this.designerConfig['eventCollapse']
    },

    editFormCss() {
      this.formCssCode = this.designer.formConfig.cssCode
      this.showEditFormCssDialogFlag = true
    },

    extractCssClass() {
      let regExp = /\..*{/g
      let result = this.formCssCode.match(regExp)
      let cssNameArray = []

      if (!!result && result.length > 0) {
        result.forEach((rItem) => {
          let classArray = rItem.split(',')  //切分逗号分割的多个class
          if (classArray.length > 0) {
            classArray.forEach((cItem) => {
              let caItem = cItem.trim()
              if (caItem.indexOf('.', 1) !== -1) {  //查找第二个.位置
                let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem.indexOf('.', 1))  //仅截取第一、二个.号之间的class
                if (!!newClass) {
                  cssNameArray.push(newClass.trim())
                }
              } else if (caItem.indexOf(' ') !== -1) {  //查找第一个空格位置
                let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem.indexOf(' '))  //仅截取第一、二个.号之间的class
                if (!!newClass) {
                  cssNameArray.push(newClass.trim())
                }
              } else {
                if (caItem.indexOf('{') !== -1) {  //查找第一个{位置
                  let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem.indexOf('{'))
                  cssNameArray.push(newClass.trim())
                } else {
                  let newClass = caItem.substring(caItem.indexOf('.') + 1)
                  cssNameArray.push(newClass.trim())
                }
              }
            })
          }
        })
      }

      //this.cssClassList.length = 0
      this.cssClassList.splice(0, this.cssClassList.length)  //清除数组必须用splice，length=0不会响应式更新！！
      this.cssClassList = Array.from(new Set(cssNameArray))  //数组去重
    },

    saveFormCss() {
      this.extractCssClass()
      this.designer.formConfig.cssCode = this.formCssCode
      insertCustomCssToHead(this.formCssCode)
      this.showEditFormCssDialogFlag = false
      this.designer.emitEvent('form-css-updated', deepClone(this.cssClassList))
    },

    editGlobalFunctions() {
      this.functionsCode = this.designer.formConfig.functions
      this.showEditFunctionsDialogFlag = true
    },

    saveGlobalFunctions() {
      const codeHints = this.$refs.gfEditor.getEditorAnnotations()
      let syntaxErrorFlag = false
      if (!!codeHints && (codeHints.length > 0)) {
        codeHints.forEach((chItem) => {
          if (chItem.type === 'error') {
            syntaxErrorFlag = true
          }
        })

        if (syntaxErrorFlag) {
          this.$confirm(this.i18nt('designer.setting.syntaxCheckWarning'), this.i18nt('render.hint.prompt'), {
            confirmButtonText: this.i18nt('render.hint.forcedSave'),
            cancelButtonText: this.i18nt('render.hint.cancel')
          }).then(() => {
            this.designer.formConfig.functions = this.functionsCode
            insertGlobalFunctionsToHtml(this.functionsCode)
            this.showEditFunctionsDialogFlag = false
          }).catch(error => {
            //
          })

          return
        }
      }

      this.designer.formConfig.functions = this.functionsCode
      insertGlobalFunctionsToHtml(this.functionsCode)
      this.showEditFunctionsDialogFlag = false
    },

    editFormEventHandler(eventName) {
      this.curEventName = eventName
      this.formEventHandlerCode = this.formConfig[eventName]
      this.showFormEventDialogFlag = true
    },

    saveFormEventHandler() {
      const codeHints = this.$refs.ecEditor.getEditorAnnotations()
      let syntaxErrorFlag = false
      if (!!codeHints && (codeHints.length > 0)) {
        codeHints.forEach((chItem) => {
          if (chItem.type === 'error') {
            syntaxErrorFlag = true
          }
        })

        if (syntaxErrorFlag) {
          this.$confirm(this.i18nt('designer.setting.syntaxCheckWarning'), this.i18nt('render.hint.prompt'), {
            confirmButtonText: this.i18nt('render.hint.forcedSave'),
            cancelButtonText: this.i18nt('render.hint.cancel')
          }).then(() => {
            this.formConfig[this.curEventName] = this.formEventHandlerCode
            this.showFormEventDialogFlag = false
          }).catch(error => {
            //
          })

          return
        }
      }

      this.formConfig[this.curEventName] = this.formEventHandlerCode
      this.showFormEventDialogFlag = false
    },

    /**
     * 编辑表单唯一值
     */
    editFormUniqueValue() {
      this.uniqueValueDialogVisible = true  // 直接设置为true
    },

     // 处理字段选择事件
    handleFieldSelected({ tableData, currentField }) {
      this.uniqueValueFields = tableData;
      this.currentUniqueField = currentField;
      console.log('已选择的唯一值字段:', this.uniqueValueFields);
      console.log('当前选择的字段:', this.currentUniqueField);
    },

    // 保存表单唯一值
    saveFormUniqueValue() {
      if (!this.uniqueValueFields || this.uniqueValueFields.length === 0) {
        this.$message.warning('请选择唯一值字段');
        return;
      }

      // 保存到formConfig中
      this.formConfig.uniqueFields = this.uniqueValueFields.map(field => field.uniqueFields);
       // 保存表格数据
      this.formConfig.uniqueValueTableData = this.uniqueValueTableData;
      console.log('保存的唯一值字段:', this.formConfig.uniqueFields)
      console.log('保存的表格数据:', this.formConfig.uniqueValueTableData)
      this.uniqueValueDialogVisible = false;
      this.$message.success('唯一值设置已保存');
    },
     // 处理表格数据更新
    handleTableDataUpdate(tableData) {
      this.uniqueValueTableData = tableData;
    },

    // 关闭弹窗时的处理
    handleUniqueValueClose() {
      this.uniqueValueDialogVisible = false;
      this.uniqueValueFields = [];
      this.currentUniqueField = null;
    },

    // 确认按钮的处理
    handleUniqueValueConfirm() {
      this.saveFormUniqueValue();
    },
    // 数据源操作方法
    handleDataOutputFormatChange(val) {
      this.designer.saveCurrentHistoryStep() // 保存当前修改到历史记录
    },
    /**
     * 表单宽度单位变化时触发的事件处理函数
     * @param val 表单宽度单位值，例如"px"、"%"。
     */
    handleFormWidthUnitChange(val) {
      if (val == "%" && this.formConfig.formWidth > 100) {
        this.formConfig.formWidth = 100;

      }
    },
  }
}
</script>

<style lang="scss" scoped>
.setting-form {
  :deep(.el-form-item__label) {
    font-size: 13px;
    //text-overflow: ellipsis;
    // overflow: hidden;
    white-space: wrap;
    line-height: 1 !important;
  }

  :deep(.el-form-item--small.el-form-item) {
    margin-bottom: 10px;
  }

  .radio-group-custom {
    :deep(.el-radio-button__inner) {
      padding-left: 12px;
      padding-right: 12px;
    }
  }

  .custom-divider.el-divider--horizontal {
    margin: 10px 0;
  }
}

.setting-collapse {
  :deep(.el-collapse-item:last-child) {
    margin-bottom: 48px;  /* 解决element-plus某些版本折叠面板内容未全部展示的问题 */
  }

  :deep(.el-collapse-item__content) {
    padding-bottom: 6px;
  }

  :deep(.el-collapse-item__header) {
    font-style: italic;
    font-weight: bold;
  }
}

.small-padding-dialog {
  :deep(.el-dialog__body) {
    padding: 6px 15px 12px 15px;
  }
}
</style>
